<template>
	<view class="order_detail pages">
		<!-- 顶部空余 -->
		<view style="width: 100%;height: var(--status-bar-height);background-color: #2b2c3c;"></view>
		<view class="order_header">
			<view class="back">
				<uni-icons type="back" size="24" color="#fff" @tap="back"></uni-icons>
			</view>
			<view class="order_title">{{orderInfo.status_str}}</view>
			<view class="order_info">{{orderInfo.status_desc}}</view>
		</view>
		<view class="order_content">
			<view class="sort_refund">
				<view class="sort_refund_header">
					<view class="sort_refund_title">
						<uni-icons type="smallcircle" color="#00cbcc" style="margin-right: 6rpx;"></uni-icons>
						<text>{{timeinfoLast.status_str}}</text>
					</view>
					<view class="sort_refund_step" @tap="openStep">
						{{$t('order.afterSaleDetail.Schedule')}}
						<uni-icons type="forward" color="#999999" style="margin-left: 6rpx;" size="14"></uni-icons>
					</view>
					<view class="sort_refund_text">{{timeinfoLast.content}}</view>
				</view>
				<!-- <view class="sort_refund_content">
					<view class="user_info">
						已退回：优惠券(1张)
					</view>
					<view class="address" @tap="toPage">
						查看
						<uni-icons type="forward" color="#999999" style="margin-left: 6rpx;" size="14"></uni-icons>
					</view>
				</view> -->
			</view>
			<!-- 商品详情 -->
			<view class="sort_detail">
				<view class="sort_detail_header">
					<uni-icons type="star" style="margin-right: 6rpx;"></uni-icons>
					<text>{{serviceArr.serviceno}}</text>
				</view>
				<view class="goods_detail">
					<view class="goods_img">
						<image :src="serviceArr.good_mainimg" mode="widthFix"></image>
					</view>
					<view class="goods_content">
						<view class="goods_title">{{serviceArr.good_name}}</view>
						<view class="goods_size">
							<text>{{serviceArr.sku_name}}</text>
							<text style="margin-left: 10rpx;">{{$t('order.afterSaleDetail.Num')}}</text>
							<text>{{serviceArr.gnums}}</text>
						</view>
						<view class="goods_discounts">
							<view class="discounts_item">
								<!-- <view class="goods_discounts_logo">
									享
								</view>
								<view class="goods_discounts_txt">
									7天无理由退货
								</view> -->
								{{$t('order.afterSaleDetail.Disbursements')}}{{serviceArr.money}}
							</view>
						</view>
					</view>
					<view class="goods_money">{{serviceArr.good_price}}</view>
				</view>
				<!-- <view class="express">
					<view class="express_title">
						快递价格
					</view>
					<view class="express_money">
						<text>¥10.00</text><text>¥0.00</text>
					</view>
				</view> -->
				<view class="money">
					<text>{{$t('order.afterSaleDetail.Refund')}}</text>
					<text>¥{{serviceArr.refmoney}}</text>
				</view>
			</view>
			<!-- 订单详情 -->
			<view class="sort_order">
				<view class="sort_order_title">
					{{$t('order.afterSaleDetail.sMsg')}}
				</view>
				<view class="sort_order_content">
					<view class="order_content_item">
						<view>{{$t('order.afterSaleDetail.sNum')}}</view>
						<view>
							<text>{{serviceArr.serviceno}}</text>
							<text class="copy" @tap="copy(serviceArr.serviceno)">{{$t('order.afterSaleDetail.Copy')}}</text>
						</view>
					</view>
					<view class="order_content_item">
						<view>{{$t('order.afterSaleDetail.Reason')}}</view>
						<view>{{serviceArr.reason}}</view>
					</view>
					<view class="order_content_item">
						<view> {{$t('order.afterSaleDetail.Type')}}</view>
						<view>{{serviceArr.type_str}}</view>
					</view>
					<view class="order_content_item" style="align-items: flex-start;">
						<view style="flex-shrink: 0;">{{$t('order.afterSaleDetail.Pic')}}</view>
						<view style="flex-grow: 1;flex-wrap: wrap;text-align: right;">
							<image :src="i" style="width: 100rpx;height: 100rpx;margin: 0 10rpx;" v-for="i in serviceArr.images_list"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order_footer">
			<view class="del_btn" v-show="serviceArr.cancel_btn==1"  @tap="serviceCancel(serviceArr.id)">
				{{$t('order.afterSaleDetail.Application')}}
			</view>
			<view class="del_btn" v-show="serviceArr.wl_btn==1" @tap="toLogistics(serviceArr.id)">
				{{$t('order.afterSaleDetail.Write')}}
			</view>
		</view>
		<u-popup :show="stepShow" round="10" @close="closeStep">
			<view class="step_content">
				<view class="step_title">
					{{$t('order.afterSaleDetail.Progress')}}
				</view>
				<view class="step_item" v-for="(item,index) in timeinfo" :key="index">
					<view class="left">
						<view class="status">
							<view class="status_inner"></view>
						</view>
					</view>
					<view class="step_item_content">
						<view class="step_content_header">
							<view>{{item.status_str}}</view>
							<view>{{item.time_str}}</view>
						</view>
						<view class="step_content_content">{{item.content}}</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { serviceDetail, serviceCancel, serviceProcess } from '@/api/api.js'
	export default {
		data() {
			return {
				stepShow: false,
				timeinfo: [],
				timeinfoLast: {},
				serviceArr: {},
				orderInfo: {}
			}
		},
		onLoad(option) {
			serviceDetail({
				token: uni.getStorageSync('token'),
				serid: option.id
			}).then(res=>{
				this.orderInfo = res.data.data
				this.serviceArr = res.data.data.service
			})
			serviceProcess({
				token: uni.getStorageSync('token'),
				serid: option.id
			}).then(res=>{
				this.timeinfo = res.data.data.list
				this.timeinfoLast = [...res.data.data.list].pop()
			})
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			toLogistics(id){
				uni.navigateTo({
					url: "/pages/shop/order/ReturnLogistics?id=" + id
				})
			},
			serviceCancel(id){
				serviceCancel({
					token: uni.getStorageSync('token'),
					serid: id
				}).then(res=>{
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/shop/order/afterSale'
						})
					}, 600)
				})
			},
			copy(value) {
				uni.setClipboardData({
					data: value,
					success: function() {}
				});
			},
			openStep() {
				this.stepShow = true
			},
			closeStep() {
				this.stepShow = false
			},
			toPage() {
				uni.navigateTo({
					url: "/pages/shop/wallet/coupon/coupon"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order_detail {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #f5f5f9;

		.order_header {
			width: 100%;
			background-color: #2b2c3c;
			color: #fff;
			padding: 40rpx 40rpx 90rpx;

			.back {
				height: 48rpx;
				display: flex;
				align-items: center;

				.uni-icons {
					transform: translate(-20%, 0);
				}
			}

			.order_title {
				font-size: 44rpx;
				margin-top: 30rpx;
			}

			.order_info {
				font-size: 24rpx;
				line-height: 26rpx;
				opacity: 0.9;
				font-weight: 400;
				margin-top: 30rpx;
			}
		}

		.order_content {
			width: 100%;
			flex: 1;
			overflow: auto;
			margin-top: -54rpx;
			padding: 0 20rpx 20rpx;

			.sort_refund {
				background: #fff;
				position: relative;
				z-index: 3;
				border-radius: 4rpx;

				.sort_refund_header {
					width: 100%;
					// height: 108rpx;
					border-bottom: 2rpx solid #f5f5f9;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					align-items: center;
					padding: 20rpx 24rpx;
					font-size: 28rpx;
					font-weight: 600;

					.sort_refund_step {
						font-size: 24rpx;
						font-weight: 500;
						color: #999999;
						line-height: 28rpx;

						uni-text {
							vertical-align: middle;
						}
					}

					.sort_refund_text {
						width: 100%;
						font-size: 24rpx;
						padding: 0 0 0 40rpx;
						font-weight: 500;
						color: #999999;
					}
				}

				.sort_refund_content {
					padding: 20rpx 20rpx 20rpx 60rpx;
					overflow: hidden;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 24rpx;
					color: #999999;
					line-height: 28rpx;
					font-weight: 400;

					.address {
						uni-text {
							vertical-align: middle;
						}
					}
				}
			}

			.sort_detail {
				background: #fff;
				border-radius: 4rpx;
				margin: 20rpx 0;


				.sort_detail_header {
					width: 100%;
					height: 108rpx;
					border-bottom: 2rpx solid #f5f5f9;
					line-height: 106rpx;
					padding: 0 24rpx;
					font-size: 28rpx;
					font-weight: 600;
				}

				.goods_detail {
					display: flex;
					font-size: 28rpx;
					padding: 30rpx;

					.goods_img {
						width: 160rpx;
						height: 160rpx;
						border: 2rpx solid #f9f9fa;
						display: flex;
						align-items: center;
						justify-content: center;

						uni-image {
							width: 100%;
						}
					}

					.goods_content {
						flex: 1;
						padding: 0 30rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.goods_title {
							font-size: 24rpx;
							line-height: 26rpx;
							font-weight: 600;
						}

						.goods_size {
							font-size: 24rpx;
							color: #888888;
						}

						.goods_discounts {
							display: flex;
							flex-wrap: wrap;

							.discounts_item {
								display: flex;
								align-items: center;
								font-size: 20rpx;
								line-height: 26rpx;
								color: #ff5e5e;
								// border: 2rpx solid #ff5e5e;

								.goods_discounts_logo {
									width: 30rpx;
									height: 100%;
									background: #fff4f5;
									margin-right: 10rpx;
									text-align: center;
								}
							}
						}
					}

					.goods_money {
						font-weight: 600;
						line-height: 28rpx;
					}
				}

				.express {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					height: 100rpx;
					border: 2rpx solid #f7f7f9;
					border-left: none;
					border-right: none;
					font-size: 28rpx;
					padding: 0 30rpx;

					.express_title {
						// font-weight: 600;
					}

					.express_money {
						font-size: 24rpx;
						line-height: 24rpx;

						uni-text:nth-child(1) {
							color: #888888;
							text-decoration: line-through;
							padding-right: 6rpx;

						}
					}
				}

				.money {
					width: 100%;
					height: 120rpx;
					padding: 0 30rpx;
					line-height: 120rpx;
					text-align: right;

					uni-text:nth-child(1) {
						font-size: 24rpx;

					}

					uni-text:nth-child(2) {
						font-size: 28rpx;
						font-weight: 600;
					}

				}
			}

			.sort_order {
				padding: 40rpx 20rpx 30rpx;
				background: #fff;

				.sort_order_title {
					font-size: 32rpx;
					font-weight: 600;

				}

				.sort_order_content {
					.order_content_item {
						margin-top: 40rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						uni-view:nth-child(1) {
							font-size: 28rpx;
							color: #2b2c3c;

						}

						uni-view:nth-child(2) {
							font-size: 24rpx;
							color: #999999;
							font-weight: 400;

							uni-text:nth-child(2) {
								display: inline-block;
								border: 2rpx solid #999999;
								padding: 0 4rpx;
								margin-left: 10rpx;
							}
						}
					}
				}
			}
		}

		.order_footer {
			padding: 20rpx 40rpx 30rpx;
			background: #fff;
			display: flex;
			flex-direction: row-reverse;

			.del_btn {
				padding: 10rpx 20rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #666;
				border-radius: 6rpx;
				border: 2rpx solid #ededed;
				margin: 0 10rpx;
			}
		}

		.step_content {
			width: 100%;
			padding: 120rpx 40rpx;
		
			.step_title {
				font-size: 32rpx;
				font-weight: 600;
				padding-bottom: 60rpx;
			}
		
			.step_item {
				display: flex;
				justify-content: center;
				// align-items: center;
				width: 100%;
				padding-bottom: 40rpx;
		
				.left {
					height: 100%;
					padding: 4rpx 0 0;
		
					.status {
						width: 20rpx;
						height: 20rpx;
						background-color: transparent;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
								
						.status_inner {
							width: 12rpx;
							height: 12rpx;
							background: #aba9b6;
							border-radius: 50%;
						}
					}
				}
		
				.step_item_content {
					flex: 1;
					margin-left: 20rpx;
		
					.step_content_header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 28rpx;
						line-height: 28rpx;
						color: #aba9b6;
		
						uni-view:nth-child(2) {
							font-size: 24rpx;
							color: #aba9b6;
						}
					}
		
					.step_content_content {
						font-size: 24rpx;
						line-height: 24rpx;
						margin-top: 10rpx;
						color: #aba9b6;
					}
				}
			}
		
			.step_item:last-child {
				.left {
					.status {
						width: 20rpx;
						height: 20rpx;
						background-color: #56a5ac;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
					
						.status_inner {
							width: 12rpx;
							height: 12rpx;
							background: #fff;
							border-radius: 50%;
						}
					}
				}
			
				.step_item_content {
			
					.step_content_header {
						color: #333333;
			
						uni-view:nth-child(2) {
							color: #333333;
						}
					}
			
					.step_content_content {
						color: #777777;
					}
				}
			}
		}



		/deep/.u-popup {
			flex: 0;
		}
	}
</style>